<template>
	<view>
		<view>
			<view id="ranking">排行榜 ></view>
			<view id="reload">
				<view class="change">换一换</view>
				<view class="iconreload"><u-icon @click="reload()" name="reload"></u-icon></view>
			</view>
		</view>
		<view id="boklist">
			<view v-for="(item,index) in list" key="index"  class="navi" :class="{ 'active': selectedIndex === index}" @click="selectItem(index)">
				{{ item }}
			</view>
		</view>
		<view id="list">
			<view id="bookList1">
				<view id="images">
					<u-image width="96%" height="73px" :src="src"></u-image>	
				</view>
				<view id="content">
					<view id="id">1</view>
					<view id="name">阴间神探</view>
				</view>
				<view id="lable">
					<view id="lable1">悬疑·</view>
					<view id="hot">1289万热度</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['推荐榜','完本榜','口碑榜','高分榜','人气榜'],
				selectedIndex: 0,
				src:"../../static/logo.png"
			}
		},
		methods: {
			getBooklist(){},
			reload(){},
			selectItem(index) {
				console.log(index)
			    this.selectedIndex = index;
			},
		}
	}
</script>

<style>
#ranking{
	float: left;
	margin: 0% 0% 0% 2%;
}
#reload{
	overflow: hidden;
	padding: 0% 0% 0% 45%;
}
.change{
	float: left;
	padding: 0% 0% 0% 0%;
}
.iconreload{
	overflow: hidden;
	padding: 3px 0% 0% 5%;
}
.active{
	float: left;
	width: 13%;
	height: 10%;
	overflow: hidden;
	background-color: orangered;
	color: white;
	border-radius: 5px;
	text-align: center;
}
.navi{
	float: left;
	margin: 2%;
}
.active:hover{
	background-color: orangered;
	color: white;
	border-radius: 5px;
}
#boklist{
	margin: 2% auto;
	overflow: hidden;
}
#images{
	width: 12%;
	float: left;
	padding: 0% 0% 0% 2%;
}
#content{
	/* overflow: hidden; */
	/* width: 90%;/ */
	display: block;
}
#id{
	float: left;
	padding: 0% 2% 0% 2%;
}
#name{
	width: 15%;
	display: block;
	overflow: hidden;
}
#lable{
	overflow: hidden;
	width: 20%;
	float: left;
	padding: 0% 2% 0% 5%;
	line-height: 30px;
}
#lable1{
	font-size: 5%;
	padding: 0% 0% 0% 3%;
	float: left;
}
#hot{
	float: left;
	font-size: 5%;
	overflow: hidden;
}
#bookList1{

}
</style>
